import { useState, useEffect } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import BlockTitle from '../../../../../framework/BlockTitle';
import { resourcePath } from '../../../../../../utils/resource';
import BasicTable from '../FloodWarning/BasicTable';
import MapPointerMove from '../common/MapPointerMove';
import WyDetail from './WyDetail';
import useMap from '../hooks/useMap';
import Legend from '../common/Legend';
import BlockPanel from '../common/BlockPanel';
import Yujinmsg from '../Yujinmsg';
export default function DisasterWarning(props) {
    const map = useMap();
    
    useEffect(() => {
        if (map) {
            setTimeout(() => {
                // map.dispatchEvent({
                //     type: 'fixed.item.show',
                //     title: '降雨量',
                //     component: <RainTable />
                // })
                map.dispatchEvent({
                    type: 'fixed.item.show',
                    title: '地灾',
                    component: <Yujinmsg activeKey={'地灾'} />
                })
            }, 100);
        }
    }, [map])
    return <>
        <PanelLeft className="layout-v" style={{
            // top: 98
        }}>
            <BasicTable jcdlx={"崩塌"} title="位移监测" mapScale={resourcePath.scales.wy_blue_scale} mapIcon={resourcePath.mapIcons[`wy_blue`]} onDetail={item => {
                map.dispatchEvent({
                    type: 'detail.show',
                    title: item.zdm,
                    component: <WyDetail item={item} />
                })
            }} />
            <BasicTable jcdlx={"滑坡"} title="形变监测" mapScale={resourcePath.scales.xb_blue_scale} mapIcon={resourcePath.mapIcons[`xb_blue`]} onDetail={item => {
                map.dispatchEvent({
                    type: 'detail.show',
                    title: item.zdm,
                    component: <WyDetail item={item} />
                })
            }} />
        </PanelLeft>

        <Legend />
        <MapPointerMove field={'zdm'} />
    </>;
}